<template>
  <div>
    <span class="serial">第{{serial}}题&emsp;&emsp;</span>
    <span class="title" >{{title}}&emsp;&emsp;</span>
    <span class="type">【{{type}}】</span>
    <br>
    <br>
  </div>
  <div>
    <el-button size="mini" type="primary" plain @click="detailClick">查看详细信息</el-button>
    <el-dialog title="详细信息" v-model="dialogVisible" width="80%">
      <div>
        <span style="font-weight: bold; color: black">第{{serial}}题:{{title}}</span>
        <el-table :data="completionData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
                  stripe border style="width: 100%">
          <el-table-column align="center" prop="serial" label="序号"></el-table-column>
          <el-table-column align="center" prop="time" label="提交答卷时间"></el-table-column>
          <el-table-column align="center" prop="text" label="答案文本"></el-table-column>
        </el-table>
        <div class="block" style="margin-top: 15px">
          <el-pagination align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="completionData.length">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
  <div>
    <span style="font-weight: bolder">本题有效填写人次：{{questionAmount}}</span>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  name: "Completion",
  data() {
    return {
      dialogVisible: false,
      currentPage: 1,
      total: 20,
      pageSize: 10,
      completionData: []
    }
  },
  props: {
    serial: Number,
    title: String,
    questionAmount: Number,
    type: String,
    questionId: Number
  },
  methods: {
    detailClick() {
      this.dialogVisible=true
      const data = {
        questionId: this.questionId
      }
      axios.post('/api/questionnaire/getCompletion', qs.stringify(data)).then((res) => {
        if(res.data.code === 0) {
          this.completionData = res.data.data.completions
          let i = 1
          this.completionData.forEach(e => {
            e.serial = i++
          })
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style scoped>

</style>